<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>模型管理</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.jpg"/>
</head>
<!-- jquery-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/css/index.css">

<!-- Dialog -->
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Dialog.css">
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Dialog.js"></script>
<script src="/js/index.js"></script>
<style>
    .input_model{
        margin-top: 3%;
    }
</style>
<body>
<!--导航栏-->
<div th:replace="common :: navbar"></div>
<!--中部统计数据-->
<div th:replace="common :: boxbar"></div>

<p th:if="${session.user.role == 1}" style="margin-left: 10%;text-align: left;color: grey">
    <a  href="/admin/userList" class="p_button" >用户管理</a>
    <a href="/modelList"  class="p_button" 、>模型管理</a>
<!--    <a href="/admin/newsAdd"  style="color: #2a80eb"  class="p_button" >新闻发布</a>-->
</p>
<p  th:if="${session.user.role == 2}" style="margin-left: 10%;text-align: left;color: grey">
    <a href="/modelList" class="p_button">教学模块</a>
    <a href="/myClass" class="p_button" >我的班级</a>
    <a href="/teacher/lesson"  class="p_button" >我的课程</a>
</p>

<section class="lesson_box" style="height: 100%">
    <form id="form" style="width: 50%;height: 100%" action="/model/insert">
        <label>标题：</label>
        <br>
        <input style="font-size: 18px;" name="title" id="title" placeholder = "请填写标题" class="ui-input ">
        <br>
        <label>简介：</label>
        <br>
        <input style="font-size: 18px;" name="subject" placeholder = "请填写简介" class="ui-input input_model" type="text">
        <br>
        <label>连接地址：</label>
        <br>
        <input style="font-size: 18px;" name="url" placeholder = "请填写新闻链接地址" class="ui-input input_model" type="text">
        <br>
        <label>选择要展示的图片：</label>
        <br>
        <input style="font-size: 18px;" id="upload" placeholder = "选择图片" accept="image/*"  class="ui-input input_model" type="file">
        <input style="font-size: 18px;width: 85%" id="imgUrl" placeholder = "上传支持jpg、npg、gif等格式。"  accept="image/*" name="imgUrl" class="ui-input input_model" type="text" readonly>
        <br>
        <div style="width: 80%;height: 50%;margin-top: 3%;margin-left:10%;text-align: center" id="imgBox"></div>
        <button  style="font-size: 18px;margin-top: -10%;"onclick="addNews();" class="ui-button input_model"  type="button">提交</button>
        <br>

    </form>
</section>

<script>
    listener();
    function listener(){
        document.getElementById('upload').addEventListener('change', function (event) {
            var $file = event.currentTarget;
            var file = $file.files;
            console.log(file);
            var formData = new FormData();
            formData.append("file", file[0]);
            console.log(formData);
            $.ajax({
                url: '/upload',
                type: 'POST',
                dataType: 'json',
                data: formData,
                contentType: false,
                processData: false,
                error:function(data){
                    console.log(data);
                    alert("请求出错.");
                },
                success:function(data){
                    console.log(data);
                    document.getElementById("imgUrl").value = data.data;
                    alert("请求成功"+data.msg);
                    $("#imgBox").html("<img src='"+data.data+"' style='width: 100%;height: 100%'>");
                }
            })

        });
    }
    function addNews() {
        console.log($("#form").serialize());
        sendJump("/admin/newsInsert","/news",null,"form");
    }


</script>
</body>
</html>